<template>
    <!--面包屑-->
    <div style="margin-bottom: 30px">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Main' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <router-link to="/PaymentApproval">付费审批管理</router-link>
            </el-breadcrumb-item>
            <el-breadcrumb-item>付费审批</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-form :model="form" label-width="auto" style="max-width: 600px" ref="ruleFormRef" :rules="rules">
        <el-form-item label="标题:" prop="paymentTitle">
            <el-input v-model="form.paymentTitle" placeholder="请输入标题" :disabled="true" />
        </el-form-item>
        <el-form-item label="付款金额:" prop="paymentPrice">
            <el-input v-model="form.paymentPrice" placeholder="请输入付款金额" :disabled="true" />
        </el-form-item>
        <el-form-item label="结算方式:" style="width: 1000px;" prop="billingMethod">
            <el-radio-group v-model="form.billingMethod" :disabled="true">
                <el-radio value="微信支付">微信支付</el-radio>
                <el-radio value="支付宝支付">支付宝支付</el-radio>
                <el-radio value="银联支付">银联支付</el-radio>
                <el-radio value="企业转账">企业转账</el-radio>
                <el-radio value="线下支付">线下支付</el-radio>
                <div>
                    <el-radio value="其它">其它</el-radio>
                    <el-input v-if="form.billingMethod==='其它'" v-model="form.otherBillingMethod" placeholder="请输入结算方式" style="width: 120px;margin-left: 30px;" />
                </div>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="支付对象:" prop="paymentMethods">
            <el-input v-model="form.paymentMethods" placeholder="请输入支付对象" :disabled="true" />
        </el-form-item>
        <el-form-item label="开户行:" prop="paymentBank">
            <el-input v-model="form.paymentBank" placeholder="请输入开户行" :disabled="true" />
        </el-form-item>
        <el-form-item label="银行账号:" prop="bankAccount">
            <el-input v-model="form.bankAccount" placeholder="请输入银行账号" :disabled="true" />
        </el-form-item>
        <el-form-item label="付款日期:" prop="paymentDate">
            <el-col :span="11">
                <el-date-picker v-model="form.paymentDate" value-forma="YYYY-MM-DD" type="date" placeholder="请选择付款日期"
                    style="width: 100%" :disabled="true" />
            </el-col>
        </el-form-item>
        <el-form-item label="用途描述:" prop="description">
            <el-input v-model="form.description" type="textarea" placeholder="请输入用途描述" :disabled="true" />
        </el-form-item>
        <el-form-item label="备注:">
            <el-input v-model="form.paymentRemark" type="textarea" placeholder="请输入备注信息" :disabled="true" />
        </el-form-item>
        <el-form-item label="票据附件:" prop="ticketAttachments">
            <el-upload class="avatar-uploader" action="http://113.44.151.225:8000/swrite/api/Payment/UploadFiles"
                :show-file-list="false" :on-success="handleAvatarSuccess">
                <img v-if="form.ticketAttachments"
                    :src="'http://113.44.151.225:8000/swrite/Pic/' + form.ticketAttachments" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item label="审批备注:">
            <el-input v-model="approvalNotes" type="textarea" placeholder="请输入备注信息" />
        </el-form-item>
        <el-form-item label="转批人:">
            <el-select v-model="subgrantor" placeholder="请选择名字" style="width: 240px;" clearable>
                <el-option v-for="item in username" :key="item.id" :label="item.name" :value="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 20%;">
            <el-button type="primary" @click="passForwarding()" :disabled="subgrantor == ''">通过并转批</el-button>
            <el-button @click="refuse()">拒绝</el-button>
            <el-button type="success" @click="passAndTerminate()">通过并终止审批</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const router = useRouter()
const route = useRoute()
const show1 = ref(false)
const form = reactive({
    createdBy: "张三",  // 创建人   
    createdDate: new Date(),    // 创建日期
    // updatedBy: "",  // 更新人
    // updatedDate: "",     // 更新日期
    // deletedBy: "",  // 删除人
    // deletedDate: "",    // 删除日期
    isDeleted: false,        // 是否删除
    paymentId: route.query.paymentId,        // 支付ID
    companyID: "",    // 公司ID
    user_Id: 0,    // 用户ID
    paymentTitle: "",    // 支付标题
    description: "",    // 描述
    paymentPrice: 0,    // 支付金额
    billingMethod: "",    // 结算方式
    otherBillingMethod: "",    // 其他结算方式
    paymentMethods: "",     // 支付方式
    paymentBank: "",    // 开户行
    bankAccount: "",    // 银行账号
    paymentApplicant: "张三",    // 申请人
    paymentDate: "",    // 支付日期
    paymentRemark: "",    // 支付备注
    ticketAttachments: "",    // 票据附件
    approvalStatus: 0,      // 审批状态
    approver: "",    // 审批人
})

//返填
const getPaymentModel = () => {
    axios.get("/jread/api/Payment/Backfill?PaymentId=" + form.paymentId)
        .then(res => {
            form.createdBy = res.data.data.createdBy;
            form.createdDate = res.data.data.createdDate;
            // form.updatedBy= res.data.data.updatedBy;
            // form.updatedDate= res.data.data.updatedDate;
            // form.deletedBy= res.data.data.deletedBy;
            // form.deletedDate= res.data.data.deletedDate;
            form.isDeleted = res.data.data.isDeleted;
            form.paymentId = res.data.data.paymentId;
            form.companyID = res.data.data.companyID;
            form.user_Id = res.data.data.user_Id;
            form.paymentTitle = res.data.data.paymentTitle;
            form.description = res.data.data.description;
            form.paymentPrice = res.data.data.paymentPrice;
            form.billingMethod = res.data.data.billingMethod;
            form.otherBillingMethod= res.data.data.otherBillingMethod;
            form.paymentMethods = res.data.data.paymentMethods;
            form.paymentBank = res.data.data.paymentBank;
            form.bankAccount = res.data.data.bankAccount;
            form.paymentApplicant = res.data.data.paymentApplicant;
            form.paymentDate = res.data.data.paymentDate;
            form.paymentRemark = res.data.data.paymentRemark;
            form.ticketAttachments = res.data.data.ticketAttachments;
            form.approvalStatus = res.data.data.approvalStatus;
            form.approver = res.data.data.approver;
            getUserSelect();
        })
        .catch(err => {
            console.log(err);
        })
}

//表单校验
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    paymentTitle: [
        { required: true, message: '标题不能为空', trigger: 'blur' },
    ],
    paymentPrice: [
        { required: true, message: '付款金额不能为空', trigger: 'blur' },
    ],
    billingMethod: [
        { required: true, message: '结算方式不能为空', trigger: 'blur' },
    ],
    paymentMethods: [
        { required: true, message: '支付对象不能为空', trigger: 'blur' },
    ],
    paymentBank: [
        { required: true, message: '开户行不能为空', trigger: 'blur' },
    ],
    bankAccount: [
        { required: true, message: '银行账户不能为空', trigger: 'blur' },
    ],
    paymentDate: [
        { required: true, message: '付款日期不能为空', trigger: 'blur' },
    ],
    description: [
        { required: true, message: '用途描述不能为空', trigger: 'blur' },
    ],
    ticketAttachments: [
        { required: true, message: '票据依附不能为空', trigger: 'blur' },
    ],
})

const handleAvatarSuccess = (val: any) => {
    form.ticketAttachments = val;
}

import type { UploadProps } from 'element-plus'
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile: any) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('图片大小不能超过2MB!')
        return false
    }
    return true
}

const subgrantor = ref('');   //转批人
const approvalNotes = ref('');  //审批意见
//通过并转批
const passForwarding = () => {
    let data = {
        approvalResult: '通过并转批',
        approver: localStorage.getItem('username'),
        approvalNotes: approvalNotes.value,
        subgrantor: subgrantor.value,
        paymentId: form.paymentId,
    }
    // console.log(data)
    axios.post('/swrite/api/Payment/ApprovalCreate', data)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success('转批成功')
                router.push('/PaymentApproval');
            }
        })
        .catch((err) => {
            console.log(err)
        })
}

//拒绝
const refuse = () => {
    let data = {
        approvalResult: '拒绝',
        approver: localStorage.getItem('username'),
        approvalNotes: approvalNotes.value,
        subgrantor: subgrantor.value,
        paymentId: form.paymentId,
    }
    console.log(data)
    axios.post('/swrite/api/Payment/ApprovalCreate', data)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success('拒绝通过')
                router.push('/PaymentApproval');
            }
        })
        .catch((err) => {
            console.log(err)
        })
}

//通过并终止审批
const passAndTerminate = () => {
    let data = {
        approvalResult: '通过并终止审批',
        approver: localStorage.getItem('username'),
        approvalNotes: approvalNotes.value,
        subgrantor: subgrantor.value,
        paymentId: form.paymentId,
    }
    // console.log(data)
    axios.post('/swrite/api/Payment/ApprovalCreate', data)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success('审批通过')
                router.push('/PaymentApproval');
            }
        })
        .catch((err) => {
            console.log(err)
        })
}


//用户名称列表
const username = ref([])
const UserSelectData: any = ref([])
const getUserSelect = () => {
    axios.get('http://1.117.93.87:8000/rbacdu/api/User/UserSelectShow').then(res => {
        //console.log(res);
        UserSelectData.value = res.data.data
        username.value = UserSelectData.value.filter(o => o.name != localStorage.getItem('username'));
        console.log(username.value);

    }).catch(err => {
        console.log(err);

    })
}


onMounted(() => {
    getPaymentModel();
})
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>